<template>
  <div>
    <!-- 渲染父组件传递过来的值props... -->
    <hr />
    <p>子组件绑定的值：{{ props.mVal }}</p>
    <p>子组件绑定的值：{{ props.mVal2 }}</p>
    <hr />
    <!-- 触发emit回传父级，实现子传父更新数据 -->
    <input
    type="text"
    :value="props.mVal"
    @input="(event) => {emit('updata:mVal',(event.target as HTMLInputElement).value)}"
    />
    <input
    type="text"
    :value="props.mVal2"
    @input="(event) => {emit('updata:mVal2',(event.target as HTMLInputElement).value)}"
    />
    <hr><br>

    <!-- 使用reactive, watch实现双向同步 -->
    <input type="text" v-model="userFrom.name">
    <input type="text" v-model="userFrom.age">
    <input type="text" v-model="userFrom.sex">
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from 'vue';
const props = defineProps(['mVal', 'mVal2', 'userInfo']);

//触发emit回传父级，实现子传父更新数据
const emit = defineEmits(['updata:mVal', 'updata:mVal2', 'updata:userInfo']);

//使用reactive, watch实现双向同步
const userFrom = reactive(props.userInfo)
watch(userFrom,()=>{
  console.log(userFrom);
  emit('updata:userInfo',userFrom)
})
</script>

<style>
input {
  border: none;
  height: 30px;
  border-radius: 15px;
  line-height: 30px;
  font-size: 15px;
  color: white;
  padding-left: 2rem;
  background-color: #409eff;
  margin: 5px;
}
</style>
